<template>
  <div class="cesium">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import * as Cesium from "cesium";
export default defineComponent({
  name: "Cesium",
  props: {
    cesiumToken: {
      type: String,
      default:
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzMzUxYjczMi1lYzhhLTQzMDQtOTIzOC02ZjlhM2FhYmI2MTIiLCJpZCI6ODM3NTUsImlhdCI6MTY0NTc3MjUzMH0.spfVO5Y_wP6SFfr5ha6rWlbK6aWVDsGc9NsRVmJ53d0",
    },
  },
  setup(props, context) {
    console.log(context);
    /**
     * 三维对象
     */
    class D3 {
      _viewer: Cesium.Viewer | undefined;
      _scene: Cesium.Scene | undefined;
      _layer: undefined;
      _sceneData: undefined;
      _mapData: undefined;
      _state: undefined;
      // _util: Cesium.Utils | undefined;
      constructor() {
        this._viewer = undefined;
        this._scene = undefined;
        this._layer = undefined;
        this._sceneData = undefined;
        this._mapData = undefined;
        this._state = undefined;
        // this._util = undefined;
      }
      init(opt = {}) {
        if (configs.mapDom && configs.mapUrl) {
          Cesium.Ion.defaultAccessToken =
            "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYTQ2ZjdjNS1jM2E0LTQ1M2EtOWM0My1mODMzNzY3YjYzY2YiLCJpZCI6MjkzMjcsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTE5NDIzNjB9.RzKlVTVDTQ9r7cqCo-PDydgUh8Frgw0Erul_BVxiS9c";
          this._viewer = new Cesium.Viewer(configs.mapDom, configs.mapOptions);
          // this._util = new Cesium.Utils(this._viewer);
          // this._viewer.imageryLayers.addImageryProvider(
          //   new Cesium.MapboxImageryProvider({
          //     mapId: "mapbox.dark",
          //   })
          // );
          // this._scene = this._viewer.scene;
          // this._scene.skyBox = this._util.setTwoGroundSkyBox();
          // this._util.setSnowEffect();
          // this.config(opt); //默认开始配置
          // this.loadScene(); //加载场景
          // this.addThreeObject() //加载three obj
        } else {
          alert("请配置地图参数");
        }
      }
    }
    /**
     * 配置
     */
    const configs = {
      d3map: new D3(),

      mapDom: "cesiumContainer",

      mapUrl: "examples/images/BlackMarble_2016.jpg",

      mapOptions: {
        shouldAnimate: true,
        useDefaultRenderLoop: true,
        infoBox: false,
        contextOptions: {
          webgl: {
            alpha: false,
            antialias: true,
            preserveDrawingBuffer: true,
            failIfMajorPerformanceCaveat: false,
            depth: true,
            stencil: false,
            anialias: false,
          },
        },
      },

      sceneUrl:
        "http://www.supermapol.com/realspace/services/3D-CQmodel_wireframe_2000/rest/realspace",
    };

    /**
     * 返回的 Cesium对象
     * @param {*} Cesium
     */
    const onloadApp = (): void => {
      try {
        //初始化三维球
        const d3map = new D3();

        d3map.init(); //d3map.initGUI()

        // document.getElementsByClassName("cesium-widget-credits")[0] &&
        //   (document.getElementsByClassName(
        //     "cesium-widget-credits"
        //   )[0].style.display = "none");
        configs.d3map = d3map;
      } catch (error) {
        console.log(error);
      }
    };

    onMounted(() => {
      console.log(props, context);
    });

    return {};
  },
});
</script>
<style scoped lang="scss">
.cesium {
  height: 100%;
  #cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
}
</style>
